/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

/**
 * Colors
 * -------------------------------------------------------------------------- */

 :root {
  --vp-c-brand: #1677FF;
  --vp-c-brand-dark: #1677FF;
  --vp-c-brand-light: #3086ff;
  --vp-c-brand-lighter: #4995ff;
  --vp-c-brand-lightest: #afd0ff;
  /* --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1; */
  --vp-c-brand-dimm: rgba(22, 119, 255, 0.08);
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  /* --vp-button-brand-text: var(--vp-c-white); */
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  /* --vp-button-brand-hover-text: var(--vp-c-white); */
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  /* --vp-button-brand-active-text: var(--vp-c-white); */
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    145deg,
    #2DC08E 26%,
    #F92855
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    rgba(45, 192, 142, 0.3),
    rgba(249, 40, 85, 0.3)
  );
  --vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(60px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(80px);
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

/* .DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
} */

/**
 * VitePress: Custom fix
 * -------------------------------------------------------------------------- */

/*
  Use lighter colors for links in dark mode for a11y.
  Also specify some classes twice to have higher specificity
  over scoped class data attribute.
*/
/* .dark .vp-doc a,
.dark .vp-doc a > code,
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
.dark .link.link:hover,
.dark .link.link.active,
.dark .edit-link-button.edit-link-button,
.dark .pager-link .title {
  color: var(--vp-c-brand-lighter);
} */

/* .dark .vp-doc a:hover,
.dark .vp-doc a > code:hover {
  color: var(--vp-c-brand-lightest);
  opacity: 1;
} */

/* Transition by color instead of opacity */
/* .dark .vp-doc .custom-block a {
  transition: color 0.25s;
} */


.home-section {
  border-top: 1px solid var(--vp-c-gutter);
  padding: 60px 24px;
  text-align: center;
}

.home-section .home-section-content {
  margin: 0 auto;
  max-width: 1152px;
}

@media (min-width: 640px) {
  .home-section {
    padding: 60px 48px
  }
}

@media (min-width: 960px) {
  .home-section{
    padding: 60px 64px
  }
}

